<template>
  <!--副导航-->
  <div class="FooterNav container">
    <div class="FooterNav-center">
      <div class="FooterNav-center-top">美团导航</div>
      <div class="FooterNav-center-bottom">
        <div class="hocity">热门城市</div>
        <div class="city">
          <ul>
            <li><a>武汉</a></li>
            <li><a>上海</a></li>
            <li><a>佛山</a></li>
            <li><a>杭州</a></li>
            <li><a>福州</a></li>
            <li><a>重庆</a></li>
            <li><a>无锡</a></li>
            <li><a>天津</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
            <li><a>武汉</a></li>
          </ul>
        </div>
        <div class="hocity">热门分类</div>
        <div class="city">
          <ul>
            <li>
              <a>酒店<span>HOT</span></a>
            </li>
            <li><a>美食</a></li>
            <li><a>休闲娱乐</a></li>
            <li><a>运动健身</a></li>
            <li><a>生活服务</a></li>
            <li><a>上门服务</a></li>
            <li><a>购物</a></li>
            <li><a>时尚购</a></li>
            <li><a>本地购物</a></li>
            <li><a>结婚</a></li>
            <li><a>摄影写真</a></li>
            <li><a>宴会</a></li>
            <li><a>丽人</a></li>
            <li><a>母婴亲子</a></li>
            <li><a>学习培训</a></li>
            <li><a>家装</a></li>
            <li><a>汽车服务</a></li>
            <li><a>医疗</a></li>
            <li><a>宠物</a></li>
          </ul>
        </div>
        <div class="hocity">周边热门</div>
        <div class="city">
          <ul>
            <li><a>惠阳酒店</a></li>
            <li><a>惠阳美食</a></li>
            <li><a>惠阳休闲娱乐</a></li>
            <li><a>惠阳运动健身</a></li>
            <li><a>谢岗镇生活服务</a></li>
            <li><a>惠阳上门服务</a></li>
            <li><a>惠阳购物</a></li>
            <li><a>香港时尚购</a></li>
            <li><a>谢岗镇本地购物</a></li>
            <li><a>惠阳结婚</a></li>
            <li><a>谢岗镇摄影写真</a></li>
            <li><a>惠阳宴会</a></li>
            <li><a>谢岗镇丽人</a></li>
            <li><a>惠阳母婴亲子</a></li>
            <li><a>惠阳学习培训</a></li>
            <li><a>谢岗镇家装</a></li>
            <li><a>香港汽车服务</a></li>
            <li><a>香港医疗</a></li>
            <li><a>香港宠物</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部链接
  <div class="footer">
    <div class="footer-center">
      <div class="footer-center-content">
        <ul>
          <b>用户帮助</b>
          <li>申请退款</li>
          <li>常见问题</li>
          <li>用户协议</li>
          <li>隐私政策</li>
          <li>反诈骗公告</li>
          <li>消费者权益保障</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>商家合作</b>
          <li>美食商家入驻(非外卖)</li>
          <li>美团外卖开店</li>
          <li>美团收银官网</li>
          <li>美团配送合作申请</li>
          <li>美团餐饮学院</li>
          <li>酒店商家入驻</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>合作商招募</b>
          <li>美团外卖合作商招募</li>
          <li>到店餐饮合作商招募</li>
          <li>到店综合业务合作商招募</li>
          <li>美团联盟</li>
          <li>美团收银招募线上分销商</li>
          <li>美团收银合作商招募</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>关注美团</b>
          <li>美团新浪微博</li>
          <li>常见问题</li>
          <li>用户协议</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>消费者服务热线</b>
          <li>外卖消费者：10109777</li>
          <li>猫眼消费者：10105335</li>
          <li>其他消费者：10107888</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>用户帮助</b>
          <li>申请退款</li>
          <li>常见问题</li>
          <li>用户协议</li>
          <li>隐私政策</li>
          <li>反诈骗公告</li>
          <li>消费者权益保障</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>美团服务</b>
          <li>美团外卖</li>
          <li>美团酒店</li>
          <li>猫眼电影</li>
          <li>美团配送</li>
          <li>美团云</li>
          <li>大众点评</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>商家合作</b>
          <li>境内度假商家入驻</li>
          <li>综合商家入驻</li>
          <li>美团民宿房东</li>
          <li>商家入驻</li>
          <li>商家开票</li>
          <li>申请美团智能收银机</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>美团规则</b>
          <li>规则中心</li>
          <li>规则评议院</li>
          <li>规则目录</li>
        </ul>
      </div>
      <div class="footer-center-content">
        <ul>
          <b>投诉举报专区</b>
          <li>违法和不良信息举报电话：4006018900</li>
          <li>举报邮箱：tousujubao@meituan.com</li>
          <li>网上有害信息举报</li>
          <li>商家自助入驻美团入口</li>
          <li>供应商注册入口</li>
        </ul>
      </div>
    </div>
  </div> -->
  <div class="com-footer">
    <div class="footer-content">
      <div class="footer-link">
        <div class="footer-column">
          <dl>
            <dt>用户帮助</dt>
            <dd>
              <a href="http://www.meituan.com/help/selfservice" rel="nofollow"
                >申请退款</a
              >
            </dd>
            <dd>
              <a
                href="http://www.meituan.com/help/selfservice?tab=2"
                rel="nofollow"
                >查看券密码</a
              >
            </dd>
            <dd>
              <a href="http://www.meituan.com/help/faq" rel="nofollow"
                >常见问题</a
              >
            </dd>
            <dd>
              <a href="http://www.meituan.com/about/terms" rel="nofollow"
                >用户协议</a
              >
            </dd>
            <dd>
              <a href="http://www.meituan.com/about/privacy" rel="nofollow"
                >隐私政策</a
              >
            </dd>
            <dd>
              <a href="http://www.meituan.com/about/anticheat" rel="nofollow"
                >反诈骗公告</a
              >
            </dd>
          </dl>
          <dl>
            <dt>服务</dt>
            <dd>
              <a href="http://waimai.meituan.com/">外卖</a>
            </dd>
            <dd>
              <a href="http://hotel.meituan.com/">酒店</a>
            </dd>
            <dd>
              <a href="http://maoyan.com/">猫眼电影</a>
            </dd>
            <dd>
              <a href="https://peisong.meituan.com/">配送</a>
            </dd>
            <dd>
              <a href="https://www.mtyun.com/">云</a>
            </dd>
            <dd>
              <a href="http://www.dianping.com/">大众点评</a>
            </dd>
            <dd>
              <a href="https://phoenix.meituan.com/">榛果民宿</a>
            </dd>
          </dl>
        </div>

        <div class="footer-column">
          <dl>
            <dt>商家合作</dt>
            <dd>
              <a
                href="https://ecom.meituan.com/bizsettle/settle?utm_source=mt_C_my"
                rel="nofollow"
                >美食商家入驻(非外卖)</a
              >
            </dd>
            <dd>
              <a href="https://kd.meituan.com/">外卖开店申请</a>
            </dd>
            <dd>
              <a
                href="http://shouyin.meituan.com?utm_source=inner&amp;utm_medium=mtpc"
                >收银官网</a
              >
            </dd>
            <dd>
              <a
                href="http://page.peisong.meituan.com/apply/join"
                rel="nofollow"
                >外卖配送加盟申请</a
              >
            </dd>
            <dd>
              <a href="https://xue.meituan.com/?from=mtpc">点评餐饮学院</a>
            </dd>
            <dd>
              <a href="http://ruzhu.meituan.com/ruzhu/index.html" rel="nofollow"
                >酒店商家入驻</a
              >
            </dd>
            <dd>
              <a
                href="https://i.meituan.com/awp/h5/trip/business/cooperation/index.html?client=pc"
                rel="nofollow"
                >境内度假商家入驻</a
              >
            </dd>
            <dd>
              <a
                href="https://e.dianping.com/claimcpc/page/index?source=mt"
                rel="nofollow"
                >综合商家入驻</a
              >
            </dd>
            <dd>
              <a href="https://phoenix.meituan.com/about/" rel="nofollow"
                >榛果民宿房东商家入驻</a
              >
            </dd>
            <dd>
              <a href="http://pc.meituan.com/?activity_code=mtpcdb"
                >商家开票申请</a
              >
            </dd>
            <dd>
              <a href="https://store.meituan.com/?utm_source=17" rel="nofollow"
                >点评智能收银机</a
              >
            </dd>
            <dd>
              <a href="http://developer.meituan.com/" rel="nofollow"
                >聚宝盆餐饮开放平台</a
              >
            </dd>
            <dd>
              <a href="http://smartpay.meituan.com/" rel="nofollow">智能支付</a>
            </dd>
            <dd>
              <a href="http://paidui.meituan.com/" rel="nofollow">排队</a>
            </dd>
            <dd>
              <a
                href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html"
                rel="nofollow"
                >快驴进货商家合作</a
              >
            </dd>
          </dl>
        </div>

        <div class="footer-column">
          <dl>
            <dt>代理商加盟</dt>
            <dd>
              <a
                href="https://i.meituan.com/awp/hfe/block/4544/index.html"
                rel="nofollow"
                >智能支付渠道加盟商招募</a
              >
            </dd>
            <dd>
              <a
                href="https://daili.meituan.com/?comeFrom=mtwebBusinesscoopd"
                rel="nofollow"
                >到店餐饮代理商招募</a
              >
            </dd>
            <dd>
              <a
                href="http://www.dianping.com/apollo/agent/index?source=mtpcd"
                rel="nofollow"
                >非餐饮代理商招募</a
              >
            </dd>
            <dd>
              <a href="http://union.meituan.com/" rel="nofollow">联盟</a>
            </dd>
            <dd>
              <a
                href="https://store.meituan.com/distribution/broadcast"
                rel="nofollow"
                >收银招募线上分销商</a
              >
            </dd>
            <dd>
              <a
                href="https://agent.meituan.com/zhaoshang?entry=5"
                rel="nofollow"
                >点评5S服务商招募</a
              >
            </dd>
          </dl>
          <dl>
            <dt>行业规范</dt>
            <dd>
              <a href="http://www.meituan.com/about/saferule" rel="nofollow"
                >点评餐饮安全管理办法</a
              >
            </dd>
          </dl>
          <dl>
            <dt>廉正举报</dt>
            <dd>
              <a
                href="mailto:lianzheng@meituan.com"
                rel="nofollow"
                target="_self"
                >廉政邮箱</a
              >
            </dd>
          </dl>
        </div>

        <div class="footer-column">
          <dl>
            <dt>关注</dt>
            <dd>
              <a href="http://weibo.com/meituan" rel="nofollow">新浪微博</a>
            </dd>
          </dl>
          <dl>
            <dt>公司信息</dt>
            <dd>
              <a href="http://zhaopin.meituan.com/" rel="nofollow">加入我们</a>
            </dd>
            <dd>
              <a href="http://www.meituan.com/about/law" rel="nofollow"
                >法律声明</a
              >
            </dd>
            <dd>
              <a href="http://www.meituan.com/about/bizlicense" rel="nofollow"
                >商户服务协议</a
              >
            </dd>
            <dd>
              <a
                href="https://dpapp-appeal.meituan.com/#/shopCreditRegulationPC"
                rel="nofollow"
                >商户诚信公约及管理办法</a
              >
            </dd>
          </dl>
        </div>

        <div class="footer-column">
          <dl>
            <dt>消费者服务热线</dt>
            <dd>
              外卖消费者：
              <a href="tel:10109777" rel="nofollow">10109777</a>
            </dd>
            <dd>
              猫眼消费者：
              <a href="tel:10105335" rel="nofollow">10105335</a>
            </dd>
            <dd>
              其他消费者：
              <a href="tel:10107888" rel="nofollow">10107888</a>
            </dd>
          </dl>
          <dl>
            <dt>商家服务热线</dt>
            <dd>
              外卖&amp;餐饮商家：
              <a href="tel:10105557" rel="nofollow">10105557</a>
            </dd>
            <dd>
              休闲娱乐、丽人、ktv、教育、结婚、亲子、家装等商家：
              <a href="tel:10100107" rel="nofollow">10100107</a>
            </dd>
          </dl>
          <dl>
            <dt>投诉举报热线</dt>
            <dd>
              违法和不良信息举报电话：
              <a href="tel:4006018900" rel="nofollow">4006018900</a>
            </dd>
            <dd>
              举报邮箱：
              <a
                href="mailto:tousujubao@meituan.com"
                rel="nofollow"
                target="_self"
                >tousujubao@meituan.com</a
              >
            </dd>
          </dl>
          <dl>
            <dt>
              <a
                href="https://ecom.meituan.com/bizsettle/settle/merchantsSettle"
                rel="nofollow"
                >商家自助入驻入口</a
              >
            </dt>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FooterNav",
};
</script>

<script setup></script>

<style scoped>
li {
  list-style-type: none;
}
ul li a {
  color: #666666;
  text-overflow: ellipsis;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70px;
}
.FooterNav {
  /* width: 1190px; */
  height: 360px;
  margin-top: 40px;
  /* margin: 50px auto 0; */
  display: block;
  text-overflow: ellipsis;
  background-color: #ffffff;
  overflow: hidden;
  border: 1px solid #e5e5e5;
}
.FooterNav-center {
  width: 1190px;
  height: 345px;
  margin: 0 auto;
}
.FooterNav-center-top {
  width: auto;
  height: 44px;
  font-size: 17px;
  font-weight: 550;
  color: #222222;
  text-align: left;
  padding-left: 20px;
  padding-top: 6px;
  line-height: 44px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.hocity {
  widows: 100px;
  height: 100%;
  float: left;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  padding: 15px 0px;
  padding-left: 20px;
}
.city {
  padding-top: 18px;
  padding-left: 10px;
  height: 90px;
  width: 1090px;
  color: #666666;
  height: auto;
  padding-bottom: 12px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.FooterNav-center-bottom .city ul li {
  width: 100px;
  height: 35px;

  display: inline-block;
  float: left;
  font-size: 14px;
  color: #222;
}
.FooterNav-center-bottom .city ul li:hover {
  color: #ff6600;
  cursor: pointer;
}
span {
  font-weight: 400;
  padding-left: 6px;
  background-color: #ff4848;
  color: white;
  border-radius: 10px;
  font-size: 14px;
}

/*底部链接*/
.footer {
  width: 100%;
  height: 450px;
  /*background:red;*/
  margin-top: 50px;
}
.footer-center {
  width: 1190px;
  height: 450px;
  /*background:blue;*/
  margin: 0 auto;
  border: 1px solid #e5e5e5;
}
/*底部链接详细信息*/
.footer-center-content {
  width: 150px;
  height: 170px;
  /*border:1px solid red;*/
  margin: 50px 0px 0px 70px;
  float: left;
}
.footer-center-content ul b {
  font-size: 14px;
  color: #222;
  line-height: 22px;
}
.footer-center-content ul li {
  font-size: 12px;
  color: #222;
  line-height: 20px;
}
.footer-center-content ul li:hover {
  color: #ff6600;
  cursor: pointer;
}
/*关于网站的介绍*/
.info {
  width: 100%;
  height: 100px;
  margin-top: 50px;
}
.info-center {
  width: 1190px;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

/* ---------------- */
.com-footer {
  margin-top: 40px;
}
.footer-content {
  height: 500px;
  width: 1190px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 2;
  box-sizing: border-box;
  text-align: left;
}
.footer-link {
  padding: 40px;
  border-top: 1px solid #e5e5e5;
}
.footer-column {
  width: 20%;
  float: left;
}
dl {
  padding-bottom: 20px;
}
dt {
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
}
dd {
  margin-left: 0;
  margin-inline-start: 20px;
}
dd a {
  color: #666666;
}
</style>
